<template>
  <div>
    <div class="main w">
      <div class="right1">
        <div class="rightTop">
          <span class="depName">{{personInfo.departmentName}}</span> :
          <span class="rateName">{{personInfo.name}}</span>
        </div>
        <div class="rightMain">
          <div class="personsPhoto">
            <img :src="imgSrc + personInfo.employeeId" alt="" :onerror="headPortrait">
            <!-- <img
              :src="'https://m.szpt.edu.cn/evaluate/api/employee/findImageByEmployeeId/' + personInfo.employeeId"
              alt
              :onerror="headPortrait"
            > -->
          </div>
          <div class="personsMessage">
            <p>
              姓名:
              <span class="personName">{{personInfo.name}}</span>
            </p>
            <p>
              职责:
              <span class="personRole">{{personInfo.role}}</span>
            </p>
          </div>
          <!-- vuex 取值方法 1 -->
          <!-- <div>{{this.$store.state.currentUserEid}}</div> -->
          <!-- 不是本人显示 -->
          <div
            v-if="this.$store.state.currentUserEid == resultEid? false:true "
            class="historyTable"
          >
            <div class="criterionContent">
              <span style="margin-right:50px">满意 : {{personInfo.satisfiedCount}} 次</span>
              <span>不满意 : {{personInfo.unSatisfiedCount}} 次</span>
            </div>

            <el-table
              :data="tableData"
              style="width: 98%;margin: 10px 1%"
              border
              stripe
              empty-text="暂无评价内容"
              :header-cell-style="elementStyleObj"
            >
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column 
                prop="time" 
                label="评价时间"
                width="99" 
                header-align="center"
                align="center">
                </el-table-column>
              <el-table-column label="评价内容" header-align="center">
                <el-table-column
                  prop="isSatisfied"
                  label="筛选"
                  width="80"
                  :filters="[{ text: '满意', value: true }, { text: '不满意', value: false }]"
                  :filter-method="filterTag"
                  filter-placement="bottom-end"
                  header-align="center"
                  align="center">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.isSatisfied === false ? 'danger' : 'success'"
                      disable-transitions>{{scope.row.isSatisfied == false? "不满意":"满意"}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="detail" label="评价详情" header-align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="评价人信息" header-align="center" align="center">
                <el-table-column
                  prop="employeeName"
                  label="姓名"
                  width="80"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="employeeBelongDepartmentName"
                  label="所属部门"
                  width="95"
                  header-align="center"
                  align="center"
                ></el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <!-- 是本人显示 -->
          <div
            v-if="this.$store.state.currentUserEid == resultEid? true:false "
            class="contentMain"
          >
            <div class style="folat:left">
              <el-table
                :data="satisfiedData"
                style="width: 88%;margin: 10px 50px 6%;fontSize:18px"
                border
                stripe
                header-align="center"
                :header-cell-style="elementStyleObj"
                empty-text="暂无评价记录"
              >
                <el-table-column
                  prop="satisfiedCount"
                  label="满意"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="unSatisfiedCount"
                  label="不满意"
                  header-align="center"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* alert提示框样式 */
.historyTable {
  float: left;
  font-family: "Microsoft" !important;
  width: 98%;
  margin: 20px 1% 30px;
  padding-bottom: 8px;
  /* padding-top:1px; */
  -webkit-box-shadow: 0px 6px 6px #e0e0e0;
  box-shadow: 0px 3px 6px #e0e0e0;
  cursor: pointer;
  background-color: #fff;
}

.user-defined-style {
  top: 46%;
}
</style>
<script>
import bus from "../../components/common";
import api from "../../util/api.js";
export default {
  name: "person",
  data() {
    return {
      personInfo: {}, //个人信息
      tableData: [], //评价信息
      headPortrait: 'this.src="' + require("../../assets/def1.png") + '"', //头像加载不出来的话显示
      elementStyleObj: {
        //element 表头样式
        background: "rgb(245, 249, 255) ",
        fontSize: "18px",
        color: "#434343",
      },
      satisfiedData: [
        //满不满意数据
        {
          satisfiedCount: 0,
          unSatisfiedCount: 0
        }
      ],
      resultEid: "", //当前结果页面的eid
      imgSrc: api.findImage, //头像的地址

    };
  },
  created() {
    this.getResultInfo();
  },
  watch: {
    $route: function(newValue, oldValue) {
      this.getResultInfo();
    }
  },
  methods: {
    //是否满意筛选
    filterTag(value, row) {
      // console.log("filter","val",value ,"row",row);
      return row.isSatisfied === value;
    },
   
    //根据id获取员工细信息
    getResultInfo() {
      //获取当前结果信息
      var personId = this.$route.params;
      // console.log("个人id1", personId.eid);
      const url = `api/employee/statistics/getEmployeeEvaluatedDetail?eid=${
        this.$route.params.eid
      }&departmentId=${this.$route.params.departmentId}`; //模板字符串
      this.axios.post(url).then(response => {
        if (response.data != null) {
          this.tableData = response.data.dataList;
          // console.log("个人评价结果列表", this.tableData);
          this.personInfo = response.data;
          // console.log("个人信息", this.personInfo);
          this.resultEid = this.personInfo.employeeId;
          // console.log("个人结果EID222", this.resultEid);
          //满意次数
          this.satisfiedData[0].satisfiedCount = response.data.satisfiedCount;
          //不满意次数
          this.satisfiedData[0].unSatisfiedCount = response.data.unSatisfiedCount;
            
        }
      });
    }
  }
};
</script>

